var carousel_box = document.querySelector(".carousel_box"),
	ul = document.querySelector("ul"),
	left_arrow = document.querySelector(".left_arrow"),
	right_arrow = document.querySelector(".right_arrow"),
	point_list = document.querySelectorAll("ol li");

var now_index = 0;

// 右箭头
right_arrow.addEventListener("click", function() {
	if(++now_index == point_list.length){
		now_index = 0;
	}
	picture_active();
})

// 左箭头
left_arrow.addEventListener("click",function(){
	if(--now_index == -1){
		now_index = point_list.length - 1;
	}
	picture_active();
})

// 点击小圆点
point_list.forEach(function(val,i){
	val.addEventListener("click",function(){
		now_index = i;
		picture_active();
	})
})

// 定义定时器
var time = setInterval(move,2000);

// 鼠标移进去
carousel_box.addEventListener("mouseover",function(){
	clearInterval(time);
})

// 鼠标移出来
carousel_box.addEventListener("mouseleave",function(){
	time = setInterval(move,2000);
})

// 小圆点选中
function picture_active() {
	// ul.style.transitionDuration = now_index == 0 || now_index == point_list.length - 1 ? "0s" : "0.3s"
	ul.style.transform = `translateX(-${now_index}00%)`;
	point_list.forEach(function(val,i){
		if(i == now_index){
			val.classList.add("active");
		}else {
			val.classList.remove("active");
		}
	})
}

// 图片滚动
function move(){
	if(++now_index == point_list.length){
		now_index = 0;
	}
	picture_active();
}


